<template>
	<div>
		<van-nav-bar :title="sellerInfo.shopName" left-text="返回" left-arrow @click-left="$router.back()" />
		<van-tabs>
			<van-tab title="本店铺车辆">
				<usedcar-list :data="usedcarList" @onBtnClick="onCarDetail"></usedcar-list>
			</van-tab>
			<van-tab title="店铺信息">
				<div>
					<div class="shop-info">
						<p class="shop-info-p">店铺名称：</p>
						<p>{{sellerInfo.shopName}}</p>
					</div>
					<div class="shop-info">
						<p class="shop-info-p">店铺地址：</p>
						<p>{{sellerInfo.shopAddress}}</p>
					</div>
					<div class="shop-info">
						<p class="shop-info-p">联系人：</p>
						<p>{{sellerInfo.contactPerson}}</p>
					</div>
					<div class="shop-info">
						<p class="shop-info-p">联系电话：</p>
						<p>{{sellerInfo.contactNumber}}</p>
					</div>
					<div class="shop-info">
						<p class="shop-info-p">微信号：</p>
						<p>{{sellerInfo.weixinNumber}}</p>
					</div>
				</div>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//本店铺车辆
				usedcarList: [],
				//本店铺信息
				sellerInfo: {}

			}
		},
		mounted() {
			let sellerId = this.$route.query.id
			this.loadShop(sellerId)
		},
		methods: {
			//加载店铺信息和车辆信息
			loadShop(sellerId) {
				let _this = this
				_this.$axios({
					method: 'post',
					url: '/usedcar/findSellerInfoAndUsedcarByIdForUser',
					data: {
						id: sellerId
					}
				}).then((resp) => {
					if (resp.code == "200") {
						this.sellerInfo = resp.data.seller
						this.usedcarList = resp.data.usedcarList
					}
				})
			},
			//车辆详情页
			onCarDetail(carId) {
				this.$router.push({
					path: "/page/detail",
					query: {
						id: carId
					}
				})
			},
		}
	}
</script>

<style scoped>
	.van-image {
		margin: 10px 5px 5px 5px;
	}

	.car-list {
		display: flex;
		flex-direction: row;
	}

	.car-list-title {
		text-align: left;
		font-size: 16px;
		font-weight: bold;
		margin: 10px 0px;
	}

	.car-list-info {
		text-align: left;
		color: #969799;
		font-size: 14px;
		margin: 0px;
	}

	.car-list-price {
		width: 60%;
		text-align: left;
		color: #ff0000;
		font-size: 18px;
		margin: 5px 0px;
	}

	.shop-info {
		display: flex;
		margin-left: 10px;
	}

	.shop-info-p {
		font-weight: bolder
	}
</style>
